<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>安全知识互动挑战</title>
    <link rel="stylesheet" href="css/style.css">
    <!-- 引入微信JSSDK -->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
    <div class="container">
        <!-- 欢迎页面 -->
        <div class="page welcome-page" id="welcomePage">
            <div class="welcome-content">
                <div class="competition-title">
                    <h2 class="art-text">四川大广赛</h2>
                </div>
                <div class="welcome-title">
                    <h1>安全知识大挑战</h1>
                    <p class="subtitle">守护安全，从我做起</p>
                </div>
                <div class="welcome-animation">
                    <div class="safety-icon"></div>
                </div>
                <div class="welcome-text">
                    <p>准备好测试你的安全意识了吗？</p>
                    <p>8个精心设计的安全问题</p>
                    <p>等你来挑战！</p>
                </div>
                <button class="welcome-btn" onclick="showStartPage()">开始挑战</button>
            </div>
        </div>

        <!-- 开始页面 -->
        <div class="page start-page" id="startPage" style="display: none;">
            <div class="content">
                <h1>安全知识大挑战</h1>
                <p>测测你的安全意识有多强？</p>
                <button class="start-btn" onclick="startGame()">开始答题</button>
            </div>
        </div>

        <!-- 游戏页面 -->
        <div class="page game-page" id="gamePage" style="display: none;">
            <div class="progress-bar">
                <div class="progress" id="progress"></div>
            </div>
            <div class="question-container">
                <div class="cartoon-element" id="cartoonElement"></div>
                <div class="question" id="question"></div>
                <div class="options" id="options"></div>
            </div>
        </div>

        <!-- 结果页面 -->
        <div class="page result-page" id="resultPage" style="display: none;">
            <div class="content">
                <h2>挑战完成！</h2>
                <div class="score" id="finalScore"></div>
                <div class="share-section">
                    <button class="share-btn" onclick="shareResult()">分享结果</button>
                </div>
            </div>
        </div>
    </div>
    <script src="js/main.js"></script>
    <script src="js/wx-config.js"></script>
</body>
</html> 